<template>
  <el-dialog title="详情" :visible.sync="dialogData.isShow" center>
    <div class="styleShow">邀请人: {{ userName }}</div>
    <el-table
      :data="tableData"
      v-loading="loading"
      align="center"
      max-height="550"
    >
      <el-table-column
        align="center"
        prop="createTime"
        label="邀请时间"
        width="180"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="inviteesUserName"
        label="被邀请人"
        width="150"
      >
      </el-table-column>
      <el-table-column align="center" label="当前状态" width="150">
        <template v-slot="{ row }">
          <span v-if="row.trialType == '0'">未领课</span>
          <span v-if="row.trialType == '1'">已领课</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="activityName"
        label="活动名称"
        width="150"
      >
      </el-table-column>
      <el-table-column align="center" label="活动状态" width="150">
        <template v-slot="{ row }">
          <span v-if="row.activityStatus == 'NOT_STARTED'">未开始</span>
          <span v-if="row.activityStatus == 'ONGOING'">进行中</span>
          <span v-if="row.activityStatus == 'OVER'">已结束</span>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { getInviteeList } from '@/api/activityCenter/activityManage/inviteHaveGift'
export default {
  props: ['dialogData'],
  data() {
    return {
      userName: '',
      loading: false,
      tableData: []
    }
  },
  mounted() {
    this.loading = true
    getInviteeList(
      this.dialogData.obj,
      (res) => {
        this.loading = false
        this.tableData = res
        this.userName = res[0].userName
      },
      () => {
        this.loading = false
      }
    )
  }
}
</script>

<style lang="less" scoped>
.styleShow {
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}
:deep(.el-dialog .el-dialog__body) {
  padding: 25px 30px 30px 20px !important;
}
</style>
